<template>
  <div class="login-container">
    <div class="login-box">
      <div class="colse-icon">
        <svg-icon icon-class="colse" @click="$emit('isColse', 'hidden')" />
      </div>
      <div style="width: 300px;">
        <div class="login-tab">
          <template v-if="loginOrRegister === 0">
            <h2>登录</h2>
            <div class="login-tab-right ">
              没有账号？<span @click="loginOrRegister = 1">点此注册</span>
            </div>
          </template>
          <template v-if="loginOrRegister === 1">
            <h2>注册</h2>
            <div class="login-tab-right ">
              已有账号？<span @click="loginOrRegister = 0">点此登录</span>
            </div>
          </template>
        </div>
        <template v-if="loginOrRegister === 0">
          <div class="login-pwd">
            <el-form class="tab-form" :model="form"  ref="formRef">
              <el-form-item prop="username"  :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
                <el-input  placeholder="请输入账号" v-model="form.username" />
              </el-form-item>
              <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                <el-input type="password" show-password placeholder="请输入密码" v-model="form.password" />
              </el-form-item>
              <el-form-item class="code-item" prop="code"
                :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
                <el-input placeholder="验证码" v-model="form.code" />
                <img class="send-session" :src="codeImg" alt="验证码图片" @click="getCode" />
              </el-form-item>
            </el-form>
            <div class="btn_primary">
              <button @click="handleSubmit">登录</button>
            </div>
            <div class="forget-password">
              <a>已有账号，忘记密码？</a>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="login-pwd">
            <el-form :model="form" class="tab-form" ref="formRef">
              <el-form-item prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
                <el-input placeholder="用户名" v-model="form.username" />
              </el-form-item>
              <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
                <el-input type="password" show-password placeholder="密码" v-model="form.password" />
              </el-form-item>
              <el-form-item prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]">
                <el-input placeholder="邮箱" v-model="form.email" />
              </el-form-item>
            </el-form>
            <div class="btn_primary">
              <button @click="handleRegister">注册</button>
            </div>
            <div class="forget-password">
              <a>已有账号，忘记密码？</a>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
// import type { LoginVo } from "@/api/login";
import { ElMessage } from 'element-plus'
import type { ElForm } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { login, code, register } from "../../api/user";
import { useUser } from '../../stores/user'
// import SvgIcon from '@/components/SvgIcon.vue'

// 0-登录  1-注册
const loginOrRegister = ref(0)

const router = useRouter()
const route = useRoute()
const { setInfo } = useUser()

if(route.query.isLogin) {
  loginOrRegister.value = 1
}

const formRef = ref<InstanceType<typeof ElForm>>()

const form = reactive({
  username: "",
  password: "",
  email: "",
  token: "",
  code: "",
})



// 获取验证码
const codeImg = ref('');
async function getCode() {
  const result = await code();
  console.log(result)
  codeImg.value = result.base64Img
  form.token = result.token
}
getCode();



// 登录
async function handleSubmit() {
  await formRef.value!.validate()

  try {
    const result = await login(form)
    localStorage.setItem('token', result.token)
    setInfo(result.sysUser)
    ElMessage.success('登录成功')
    router.replace("/")
  } catch (e) {
    console.log(e)
  }

}

async function handleRegister() {
  await formRef.value!.validate()
  await register(form)
  loginOrRegister.value = 0
  ElMessage.success('注册成功')
  
}


</script>

<style lang="scss" scoped>
.login-container {
  background: url(@/assets/images/login.png);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: fixed;
  padding: 0;
  font-size: 12px;



  .login-box {
    width: 500px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    gap: 10px;
    border-radius: 0.5em;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
    padding: 52px 20px 29px 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .colse-icon {
      width: 32px;
      height: 32px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 2;
    }

    a {
      color: #009fda;
    }



    .login-tab {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      align-items: flex-end;


      .login-tab-right {
        span {
          color: #009fda;
        }

      }

      .active-tab {
        color: #4fa5d9;
        cursor: not-allowed;
      }




    }
  }

  :deep(.el-form) {

    .code-item {
      .el-input {
        .el-input__wrapper {
          box-shadow: none;
          background-color: #f4f4f5;
        }
      }
    }

  }


  .login-pwd {
    position: reactive;



    .send-session {
      position: absolute;
      right: 0;
      line-height: 44px;
      text-align: center;
      width: 120px;
      // border-left: 2px solid #e3e5e7;

    }

    .session_button {
      text-align: right;
      margin-bottom: 20px;
      color: #009fda;
    }

    .forget-password {
      text-align: center;
      margin: 20px;
    }

    .btn_primary {
      display: flex;
      justify-content: center;

      button {
        height: 40px;
        width: 50%;
        background-color: #fe7300;
        border: none;
        color: white;
        border-radius: 8px;

        &:hover {
          background-color: #f38d30;
        }

      }


    }

    .tab-form {

      .el-input {

        height: 44px;

      }

    }
  }
}
</style>